import {defineComponent, onMounted, ref} from 'vue'
import View from 'ol/View';
import Map from 'ol/Map';
import "ol/ol.css"
import {Rotate, ScaleLine} from "ol/control";
import {fromLonLat} from "ol/proj";
import {XYZ, Image, TileArcGISRest} from "ol/source";
import "./index.scss"
import TileLayer from "ol/layer/Tile";
import ImageLayer from "ol/layer/Image";
import Tile from "ol/layer/Tile";

export default defineComponent({
    name: 'com-gis',
    setup() {

        const mapRef = ref<HTMLElement>()
        const mapScreen = ref<Map>()
        const MapSource = new XYZ({
            url: 'https://webst0{1-4}.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}',
            attributions: '&copy; <a href="https://www.amap.com/">高德地图</a>'
        });
        const mapSourceCT = new TileArcGISRest({ // 城投底图源
            url: 'https://jscyj.hzcjtz.com/arcgis/rest/services/chengtou2024/vectorpc2024/Mapserverhttps://jscyj.hzcjtz.com/arcgis/rest/services/chengtou2024/vectorpc2024/Mapserver/tile/{z}/{y}/{x}',
        })
        const initMapHandle = async () => {
            mapScreen.value = new Map({
                target: mapRef.value || 'map',
                view: new View({
                    center: fromLonLat([120.1464, 30.2448]), // 杭州
                    zoom: 11.5,
                }),
                controls: [
                    new Rotate(),
                    new ScaleLine(),
                ],
            });
        }
        const findMapData = async () => {
            if(!mapScreen.value) return;
            mapScreen.value.addLayer(new TileLayer({
                source: MapSource ,
            }))
        }
        const setOptions = async () => {
            await initMapHandle()
            await findMapData()
        }
        // 轮询请求
        const pollingHandle = async () => {

        }
        onMounted(setOptions)
        return () => (
            <div
                id={'map'}
                ref={'mapRef'}
                class={'gis-container'}>
            </div>
        )
    },
})
